<template>
  <div class="content">
    <div class="top-tab">
        <div class="sort-box" @click="changeSort">
          积分
          <span class="arrow" :class="{reverse:scores == 'desc'}">&#9650;</span>
        </div>
        <div class="credits-box">
          <p class="credits-wrap">
            您的积分：<span>{{userscore}}分</span>
          </p>
          <div class="credits-record-link">
            <img src="~assets/img/mall/icon_gift.png" alt="兑换记录">
            <router-link to='/record_list'>兑换记录</router-link>
          </div>
        </div>
    </div>
    <div class="mall-content">
      <goods-list :list="list" :loading="loading" :no-more="no_more" @load-more="loadMore"></goods-list>
    </div>
    <div class="bottom-tab">
      <ul>
        <li>
          <router-link to="/user"><img src="~assets/img/mall/icon_user.png" alt="个人中心" class="icon-user"><span>个人中心</span></router-link>
        </li>
        <li>
          <router-link to="/mall"><img src="~assets/img/mall/icon_mall.png" alt="商城" class="icon-mall"><span>商城</span></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import goodsList from "./../goods/list"
import { apiPost } from 'src/common/api.js'
export default {
  name: "mall-index",
  components: {
    goodsList
  },
  data() {
    return {
      scores: 'asc',
      userscore:0,
      list:[],
      loading:false,
      no_more:false
    };
  },
  watch: {
    scores(val) {
      this.list = []
      this.no_more = false
      this.loadMore()
    }
  },
  mounted() {
    this.loadMore()
  },
  methods: {
    loadMore() {
      if(this.loading || this.no_more){
        return false
      }
      this.loading = true;
      apiPost('goods',{scores:this.scores,start:this.list.length,limit:10}).then((res) => {
        if (res.status === 0) {
          this.userscore = res.data.user_scores
          if(res.data.list.length > 0){
            this.list = this.list.concat(res.data.list)
          }else{
            this.no_more = true
          }
        } else {
          console.log(res.msg)
        }
      })
      .then(()=>{
        this.loading = false
      })
    },
    changeSort() {
      this.scores == 'asc' ? this.scores = 'desc' : this.scores = 'asc'
    }
  }
};
</script>
<style scoped lang='scss'>
@import "./../../../lib/reset.scss";
.content {
  position: relative;
  background: #f4f4f6;
  .top-tab {
    display: flex;
    padding: 15px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #d2d2d2;
    box-sizing: border-box;
    z-index: 5;
    .sort-box {
      flex: none;
      line-height: 30px;
      padding-right: 15px;
      border-right: 1px solid #d2d2d2;
      color: #333;
      .arrow {
        display: inline-block;
        color: #777;
        transition: all .3s ease;
      }
      .arrow.reverse{
        transform: rotate(180deg);
      }
    }
    .credits-box {
      display: flex;
      flex: 1 0 auto;
      justify-content: space-between;
      line-height: 30px;
      padding-left: 15px;
      .credits-wrap {
        color: #333;
        span {
          color: #ff5a5a;
        }
      }
      .credits-record-link {
        img {
          width: 18px;
          object-fit: contain;
        }
        a {
          display: inline-block;
          margin-left: 0.5em;
          padding: 0 0.5em;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background: #23ab1b;
        }
      }
    }
  }
  .mall-content {
    position: relative;
    height: 100%;
    padding: 60px 0 50px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .bottom-tab {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    ul {
      list-style: none;
      font-size: 0;
      li {
        display: inline-block;
        width: 50%;
        font-size: 0;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          color: #23ab1b;
          text-align: center;
          img {
            margin-right: 0.5em;
            width: 25px;
            height: 25px;
            object-fit: contain;
            vertical-align: text-top;
          }
        }
        a.router-link-active {
          background: #23ab1b;
          color: #fff;
        }
      }
    }
  }
}
</style>
